<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width,initial-scale=1">
        <link href="framework/font-awesome/css/font-awesome.min.css" rel="stylesheet">
        <link href="framework/reset.css" rel="stylesheet">
        <link href="framework/icon.css" rel="stylesheet">
        <link href="css/index.css" rel="stylesheet">
        <script src="js/index.js"></script>
        <title>饿了么 首页</title>
    </head>
    <body>
        <!-- 总容器 -->
        <div class="wrapper">
            <!-- header部分 -->
            <header>
                <div class="icon-location-box">
                    <div class="icon-location"></div>
                </div>
                <div class="location-text">沈阳市规划大厦<i class="fa fa-caret-down"></i></div>
            </header>

            <!-- search部分 -->
            <!-- 
                搜索框部分（此块与search-fixed-top块宽度高度一致，用于当
                search-fixed-top块固定后，挡住下面块不要窜上去） 
            -->
            <div class="search">
                <!-- 当滚动条超过上面的定位块时，search-fixed-top块变成固定在顶部。 -->
                <div class="search-fixed-top" id="fixedBox">
                    <!-- 搜索框部分中间的白框 -->
                    <div class="search-box">
                        <i class="fa fa-search"></i>搜索饿了么商家、商品名称
                    </div>
                </div>
            </div>

            <!-- 点餐分类部分 -->
            <ul class="foodtype">
                <li onclick="location.href='businessList.html'">
                    <img src="img/dcfl01.png">
                    <p>美食</p>
                </li>
                <li onclick="location.href='businessList.html'">
                    <img src="img/dcfl02.png">
                    <p>早餐</p>
                </li>
                <li onclick="location.href='businessList.html'">
                    <img src="img/dcfl03.png">
                    <p>跑腿代购</p>
                </li>
                <li onclick="location.href='businessList.html'">
                    <img src="img/dcfl04.png">
                    <p>汉堡披萨</p>
                </li>
                <li onclick="location.href='businessList.html'">
                    <img src="img/dcfl05.png">
                    <p>甜品饮品</p>
                </li>
                <li onclick="location.href='businessList.html'">
                    <img src="img/dcfl06.png">
                    <p>速食简餐</p>
                </li>
                <li onclick="location.href='businessList.html'">
                    <img src="img/dcfl07.png">
                    <p>地方小吃</p>
                </li>
                <li onclick="location.href='businessList.html'">
                    <img src="img/dcfl08.png">
                    <p>米粉面馆</p>
                </li>
                <li onclick="location.href='businessList.html'">
                    <img src="img/dcfl09.png">
                    <p>包子粥铺</p>
                </li>
                <li onclick="location.href='businessList.html'">
                    <img src="img/dcfl10.png">
                    <p>炸鸡炸串</p>
                </li>
            </ul>

            <!-- 横幅广告部分 -->
            <div class="banner">
                <h3>品质套餐</h3>
                <p>搭配齐全吃得好</p>
                <a>立即抢购 &gt;</a>
            </div>

            <!-- 超级会员部分 -->
            <div class="supermember">
                <div class="left">
                    <img src="img/super_member.png">
                    <h3>超级会员</h3>
                    <p>&#8226; 每月享超值权益</p>
                </div>
                <div class="right">
                    立即开通 &gt;
                </div>
            </div>

            <!-- 推荐商家部分 -->
            <div class="recommend">
                <div class="recommend-line"></div>
                <p>推荐商家</p>
                <div class="recommend-line"></div>
            </div>

            <!-- 推荐方式部分 -->
            <ul class="recommendtype">
                <li>综合排序<i class="fa fa-caret-down"></i></li>
                <li>距离最近</li>
                <li>销量最高</li>
                <li>筛选<i class="fa fa-filter"></i></li>
            </ul>

            <!-- 推荐商家列表部分 -->
            <ul class="business">
                <li>
                    <img src="img/sj01.png">
                    <div class="business-info">
						
                        <div class="business-info-h">
                            <h3>万家饺子（软件园E18店）</h3>
                            <div class="business-info-like">&#8226;</div>
                        </div>
						
                        <div class="business-info-star">
                            <div class="business-info-star-left">
                                <i class="fa fa-star"></i>
                                <i class="fa fa-star"></i>
                                <i class="fa fa-star"></i>
                                <i class="fa fa-star"></i>
                                <i class="fa fa-star"></i>
                                <p>4.9 月售345单</p>
                            </div>
                            <div class="business-info-star-right">
                                蜂鸟专送
                            </div>
                        </div>
						
                        <div class="business-info-delivery">
                            <p>&#165;15起送 | &#165;3配送</p>
                            <p>3.22km | 30分钟</p>
                        </div>
						
                        <div class="business-info-explain">
                            <div>各种饺子</div>
                        </div>
						
                        <div class="business-info-promotion">
                            <div class="business-info-promotion-left">
                                <div class="business-info-promotion-left-incon">新</div>
                                <p>饿了么新用户首单立减9元</p>
                            </div>
                            <div class="business-info-promotion-right">
                                <p>2个活动</p>
                                <i class="fa fa-caret-down"></i>
                            </div>
                        </div>
						
                        <div class="business-info-promotion">
                            <div class="business-info-promotion-left">
                                <div class="business-info-promotion-left-incon" style="background-color: #F1884F;">特</div>
                                <p>特价商品5元起</p>
                            </div>
                        </div>
                    </div>
                </li>
                <li>
                    <img src="img/sj02.png">
                    <div class="business-info">
                        <div class="business-info-h">
                            <h3>小锅饭豆腐馆（全运店）</h3>
                            <div class="business-info-like">&#8226;</div>
                        </div>
                        <div class="business-info-star">
                            <div class="business-info-star-left">
                                <i class="fa fa-star"></i>
                                <i class="fa fa-star"></i>
                                <i class="fa fa-star"></i>
                                <i class="fa fa-star"></i>
                                <i class="fa fa-star"></i>
                                <p>4.9 月售345单</p>
                            </div>
                            <div class="business-info-star-right">
                                蜂鸟专送
                            </div>
                        </div>
                        <div class="business-info-delivery">
                            <p>&#165;15起送 | &#165;3配送</p>
                            <p>3.22km | 30分钟</p>
                        </div>
                        <div class="business-info-explain">
                            <div>各种饺子</div>
                        </div>
                        <div class="business-info-promotion">
                            <div class="business-info-promotion-left">
                                <div class="business-info-promotion-left-incon">新</div>
                                <p>饿了么新用户首单立减9元</p>
                            </div>
                            <div class="business-info-promotion-right">
                                <p>2个活动</p>
                                <i class="fa fa-caret-down"></i>
                            </div>
                        </div>
                        <div class="business-info-promotion">
                            <div class="business-info-promotion-left">
                                <div class="business-info-promotion-left-incon" style="background-color: #F1884F;">特</div>
                                <p>特价商品5元起</p>
                            </div>
                        </div>
                    </div>
                </li>
                <li>
                    <img src="img/sj03.png">
                    <div class="business-info">
                        <div class="business-info-h">
                            <h3>麦当劳麦乐送（全运路店）</h3>
                            <div class="business-info-like">&#8226;</div>
                        </div>
                        <div class="business-info-star">
                            <div class="business-info-star-left">
                                <i class="fa fa-star"></i>
                                <i class="fa fa-star"></i>
                                <i class="fa fa-star"></i>
                                <i class="fa fa-star"></i>
                                <i class="fa fa-star"></i>
                                <p>4.9 月售345单</p>
                            </div>
                            <div class="business-info-star-right">
                                蜂鸟专送
                            </div>
                        </div>
                        <div class="business-info-delivery">
                            <p>&#165;15起送 | &#165;3配送</p>
                            <p>3.22km | 30分钟</p>
                        </div>
                        <div class="business-info-explain">
                            <div>各种饺子</div>
                        </div>
                        <div class="business-info-promotion">
                            <div class="business-info-promotion-left">
                                <div class="business-info-promotion-left-incon">新</div>
                                <p>饿了么新用户首单立减9元</p>
                            </div>
                            <div class="business-info-promotion-right">
                                <p>2个活动</p>
                                <i class="fa fa-caret-down"></i>
                            </div>
                        </div>
                        <div class="business-info-promotion">
                            <div class="business-info-promotion-left">
                                <div class="business-info-promotion-left-incon" style="background-color: #F1884F;">特</div>
                                <p>特价商品5元起</p>
                            </div>
                        </div>
                    </div>
                </li>
                <li>
                    <img src="img/sj04.png">
                    <div class="business-info">
                        <div class="business-info-h">
                            <h3>米村拌饭（浑南店）</h3>
                            <div class="business-info-like">&#8226;</div>
                        </div>
                        <div class="business-info-star">
                            <div class="business-info-star-left">
                                <i class="fa fa-star"></i>
                                <i class="fa fa-star"></i>
                                <i class="fa fa-star"></i>
                                <i class="fa fa-star"></i>
                                <i class="fa fa-star"></i>
                                <p>4.9 月售345单</p>
                            </div>
                            <div class="business-info-star-right">
                                蜂鸟专送
                            </div>
                        </div>
                        <div class="business-info-delivery">
                            <p>&#165;15起送 | &#165;3配送</p>
                            <p>3.22km | 30分钟</p>
                        </div>
                        <div class="business-info-explain">
                            <div>各种饺子</div>
                        </div>
                        <div class="business-info-promotion">
                            <div class="business-info-promotion-left">
                                <div class="business-info-promotion-left-incon">新</div>
                                <p>饿了么新用户首单立减9元</p>
                            </div>
                            <div class="business-info-promotion-right">
                                <p>2个活动</p>
                                <i class="fa fa-caret-down"></i>
                            </div>
                        </div>
                        <div class="business-info-promotion">
                            <div class="business-info-promotion-left">
                                <div class="business-info-promotion-left-incon" style="background-color: #F1884F;">特</div>
                                <p>特价商品5元起</p>
                            </div>
                        </div>
                    </div>
                </li>
                <li>
                    <img src="img/sj05.png">
                    <div class="business-info">
                        <div class="business-info-h">
                            <h3>申记串道（中海康城店）</h3>
                            <div class="business-info-like">&#8226;</div>
                        </div>
                        <div class="business-info-star">
                            <div class="business-info-star-left">
                                <i class="fa fa-star"></i>
                                <i class="fa fa-star"></i>
                                <i class="fa fa-star"></i>
                                <i class="fa fa-star"></i>
                                <i class="fa fa-star"></i>
                                <p>4.9 月售345单</p>
                            </div>
                            <div class="business-info-star-right">
                                蜂鸟专送
                            </div>
                        </div>
                        <div class="business-info-delivery">
                            <p>&#165;15起送 | &#165;3配送</p>
                            <p>3.22km | 30分钟</p>
                        </div>
                        <div class="business-info-explain">
                            <div>各种饺子</div>
                        </div>
                        <div class="business-info-promotion">
                            <div class="business-info-promotion-left">
                                <div class="business-info-promotion-left-incon">新</div>
                                <p>饿了么新用户首单立减9元</p>
                            </div>
                            <div class="business-info-promotion-right">
                                <p>2个活动</p>
                                <i class="fa fa-caret-down"></i>
                            </div>
                        </div>
                        <div class="business-info-promotion">
                            <div class="business-info-promotion-left">
                                <div class="business-info-promotion-left-incon" style="background-color: #F1884F;">特</div>
                                <p>特价商品5元起</p>
                            </div>
                        </div>
                    </div>
                </li>
            </ul>

            <!-- 底部菜单部分 -->
            <ul class="footer">
                <li class="checked" onclick="location.href='index.html'">
                    <i class="fa fa-home"></i>
                    <p>首页</p>
                </li>
                <li>
                    <i class="fa fa-compass"></i>
                    <p>发现</p>
                </li>
                <li onclick="location.href='orderList.html'">
                    <i class="fa fa-file-text-o"></i>
                    <p>订单</p>
                </li>
                <li>
                    <i class="fa fa-user-o"></i>
                    <p>我的</p>
                </li>
            </ul>
        </div>
    </body>
</html>
